// 基础外观配置
import { reactive } from "vue";
import { defineStore } from "pinia";
//引入基础配置类型
import type { Layout } from "./types/type";
import { STORE_CONFIG } from "./constant/cacheKey";

/**
 * 仓库名称在命名时推荐使用use开头的名称，命名为 use...
 * defineStore
 * 第一个参数是定义该仓库的id,具有唯一性，pinia使用它将store连接到devtool
 * 第二个参数通常是对象形式 里面包含各种选项信息options
 * 第二个参数也可以是一个回调函数，它允许你自定义仓库信息 最后要将自定义的仓库信息return出去
 * */
/**
 * interface
 *  const layout:Layout = reactive({});
 * type
 * const layout = reactive<Layout>({});
 */
export const useConfig = defineStore(
  "config",
  () => {
    const layout = reactive<Layout>({
      /* 全局 */
      showDrawer: false,
      // 是否收缩布局(小屏设备)
      shrink: false,
      // 后台布局方式，可选值<Default|Classic|Streamline>
      layoutMode: "Dashboard",
      // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
      // mainAnimation: "animate__bounceInRight/animate__lightSpeedInRight/animate__rotateInDownRight",
      mainAnimation: "animate__animated animate__fadeInRight",
      // mainAnimation: 'slide-right',
      // 是否暗黑模式
      isDark: false,

      /* 侧边菜单 */
      // 侧边菜单背景色
      menuBackground: ["#ffffff", "#1d1e1f"],
      // 侧边菜单文字颜色
      menuColor: ["#303133", "#CFD3DC"],
      // 侧边菜单激活项背景色
      menuActiveBackground: ["#ffffff", "#1d1e1f"],
      // 侧边菜单激活项文字色
      menuActiveColor: ["#409eff", "#3375b9"],
      // 侧边菜单顶栏背景色
      menuTopBarBackground: ["#fcfcfc", "#1d1e1f"],
      // 侧边菜单宽度(展开时)，单位px
      menuWidth: 260,
      // 侧边菜单项默认图标
      menuDefaultIcon: "el-icon-Minus",
      // 是否水平折叠收起菜单
      menuCollapse: false,
      // 是否只保持一个子菜单的展开menuColor手风琴)
      menuUniqueOpened: false,
      // 显示菜单栏顶栏(LOGO)
      menuShowTopBar: true,

      /* 顶栏 */
      // 顶栏文字色
      headerBarTabColor: ["#000000", "#CFD3DC"],
      // 顶栏激活项背景色
      headerBarTabActiveBackground: ["#ffffff", "#1d1e1f"],
      // 顶栏激活项文字色
      headerBarTabActiveColor: ["#000000", "#409EFF"],
      // 顶栏背景色
      headerBarBackground: ["#ffffff", "#1d1e1f"],
      // 顶栏悬停时背景色
      headerBarHoverBackground: ["#f5f5f5", "#18222c"],

      /* 总览侧边栏 */
      overviewLayoutMode: "Default",
      overviewMenuWidth: 250,
      overviewshrink: false,
      overviewCollapse: false,
    });

    const lang = reactive({
      // 默认语言，可选值<zh-cn|en>
      defaultLang: "zh-cn",
      // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
      fallbackLang: "zh-cn",
      // 支持的语言列表
      langArray: [
        { name: "zh-cn", value: "中文简体" },
        { name: "en", value: "English" },
      ],
    });

    //菜单是否折叠方法
    const menuWidth = () => {
      //在自定义仓库的函数内获取layout对象的变量直接layout. 而不是this.
      //如果shrink为true（小屏设备）
      if (layout.shrink) {
        //再判断是否水平折叠起菜单
        return layout.menuCollapse ? "0px" : layout.menuWidth + "px";
      }
      //pc端判断是否水平折叠起菜单
      return layout.menuCollapse ? "64px" : layout.menuWidth + "px";
    };

    function setLang(val: string) {
      lang.defaultLang = val;
    }

    function onSetLayoutColor(data = layout.layoutMode) {
      // 切换布局时，如果是为默认配色方案，对菜单激活背景色重新赋值
      const tempValue = layout.isDark
        ? { idx: 1, color: "#1d1e1f", newColor: "#141414" }
        : { idx: 0, color: "#ffffff", newColor: "#f5f5f5" };
      if (
        data == "Classic" &&
        layout.headerBarBackground[tempValue.idx] == tempValue.color &&
        layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.color
      ) {
        layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.newColor;
      } else if (
        data == "Default" &&
        layout.headerBarBackground[tempValue.idx] == tempValue.color &&
        layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.newColor
      ) {
        layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.color;
      }
    }

    function setLayoutMode(data: string) {
      layout.layoutMode = data;
      //暂时不适配颜色
      // onSetLayoutColor(data);
    }
    const overviewMenuWidth = () => {
      if (layout.overviewshrink) {
        //再判断是否水平折叠起菜单
        return layout.overviewCollapse
          ? "0px"
          : layout.overviewMenuWidth + "px";
      }
      //pc端判断是否水平折叠起菜单
      return layout.overviewCollapse ? "30px" : layout.overviewMenuWidth + "px";
    };

    //顶部导航栏选中颜色切换
    const getColorVal = function (name: keyof Layout): string {
      const colors = layout[name] as string[];
      if (layout.isDark) {
        return colors[1];
      } else {
        return colors[0];
      }
    };

    //后台自适应布局配置
    const setLayout = (name: keyof Layout, value: any) => {
      layout[name] = value as never;
    };
    //总览自适应布局配置
    const overViewsetLayout = (name: keyof Layout, value: any) => {
      layout[name] = value as never;
    };
    //折叠菜单
    const changeMenuCollapse = (aside: boolean) => {
      layout.menuCollapse = aside;
    };

    return {
      layout,
      lang,
      menuWidth,
      setLang,
      setLayout,
      setLayoutMode,
      getColorVal,
      overviewMenuWidth,
      overViewsetLayout,
      changeMenuCollapse,
    };
  },
  {
    persist: {
      key: STORE_CONFIG,
    },
  }
);
